import * as React from 'react';
//建立页面数据和store 的关联
import { connect } from 'react-redux'
import { BrowserRouter as Router,withRouter,RouteComponentProps, Route, Switch, Redirect } from 'react-router-dom'
import { Post, Get, Patch, Put } from '../../utils/utilHttp'


interface IState {
}
interface IProps extends RouteComponentProps {
  isLogin:boolean,
  path:string,
  component:any
}
class PrivateRoute extends React.Component<IProps, IState> {
  render() {
    let { isLogin,component:Component,...rest } =this.props;
    // 代码的精妙之处 自身接收了要跳转的组件替换了它
    return (<Route {...rest} 
      render={props => {
        return isLogin?  <Component {...props} />: <Redirect to="/404" />
      }} />)
  }
}


//将store里面的数据映射到props 这个数据
//就是取store的数据 然后操作 赋值给页面的变量
//将页面数据和全局数据绑定
const mapState = ({ store }: any) => {
  return ({
    isLogin: store.isLogin
  })
}

const mapDispatch = ({ store }: any) => ({
  // changeLoaderType() {
  //   store.changeLoaderType(true)
  // }
})
//返回了 connect 其实是一个容器组件
export default connect(mapState, mapDispatch)(withRouter(PrivateRoute)); 
